<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#wrap{
				width:100px;
				height:100px;
				padding:100px;
				border:1px solid red;
				margin:50px auto;
				transform-style: preserve-3d;
				perspective: 1500px;
				perspective-origin: top left;
				
				background: rgba(0,0,0,0.6);
				animation: 10s rotate linear infinite;
			}
			#wrap .box{
				width:100px;
				height:100px;
				position:relative;
				transform-style: preserve-3d;
				/*transform-origin: center center 50px;*/
				transform:translateZ(-50px);
			}
			#wrap .box div{
				width:100px;
				height:100px;
				position:absolute;
				top:0px;
				left:0px;
				color:white;
				font:bold 50px/100px "微软雅黑";
				text-align: center;
			}
			#wrap .box div:nth-of-type(1){
				background: cadetblue;
				transform: translateZ(100px);
			}
			#wrap .box div:nth-of-type(2){
				background: navy;
				top:100px;
				transform-origin: center top;
				transform: rotateX(90deg);
			}
			#wrap .box div:nth-of-type(3){
				background: chocolate;
				top:-100px;
				transform-origin: center bottom;
				transform: rotateX(-90deg);
			}
			#wrap .box div:nth-of-type(4){
				background: cornflowerblue;
				left:100px;
				transform-origin: center left;
				transform: rotateY(-90deg);
			}
			#wrap .box div:nth-of-type(5){
				background: crimson;
				left:-100px;
				transform-origin: center right;
				transform: rotateY(90deg);
			}
			#wrap .box div:nth-of-type(6){
				background: blueviolet;
			}
			@keyframes rotate{
				100%{
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="box">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
		</div>
	</body>
</html>
